<template>
 <div class="login-page"> 
    <div class="left"></div>
    <div class="loginContainer">
 <el-form :model="loginForm"
             status-icon
             :rules="rules"
             ref="loginForm"
             label-width="100px"
             class="demo-loginForm">
              <p class="top-one">后台管理系统</p>
      <el-form-item color="white" label="用户名" prop="username">
        <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="password">
        <el-input type="password"
                  v-model="loginForm.password"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success"
                   @click="submitForm('loginForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
    <video class="bg_video"
           muted
           src="../../assets/video/bg_video.mp4"
           autoplay
           loop
           preload="auto"></video>
  </div>
</template>
<script>
  import { login } from "@/api"
  import { mapMutations } from "vuex";
  export default {
    data() {
      var validateUsername = (rule, value, callback) => {
        if (!value) {
          callback('4到16位(字母，数字，下划线，减号)')
        } else {
          callback()
        }

      };
      var validatePassword = (rule, value, callback) => {
        if (!value) {
          callback('请输入密码')
        } else {
          callback()
        }
      };
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      ...mapMutations(['SET_USERINFO']),
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
             const loading = this.$loading({
            lock: true,
            text: "正在登录......",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          })
          let { username, password } = this.loginForm;
            login(username, password)
              .then(res => {
                loading.close()
                if (res.data.state) {
                  this.$message.success('登入成功')
                  localStorage.setItem('wf-token', res.data.token)
                  localStorage.setItem('wf-userInfo', JSON.stringify(res.data.userInfo))
                  this.SET_USERINFO(res.data.userInfo);
                this.$router.push("/")
               } else {
                  this.$message.error('用户名密码错误')
                }
              })
              .catch(err => {
                console.log(err);
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style scoped>
 .login-page {
    height: 100%;
    width: 100%;
    background: url("../../assets/imgs/bg.jpg");
    overflow: hidden;
  }
   .loginContainer {
    position: relative;
    z-index: 9;
    width: 25rem;
    height: 30.47619048rem;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-30%, -70%);
    border-radius: 11px;
    text-align: center;}
    .title {
      color: #fff;
      margin-top: 100px;
      margin-bottom: 50px;
    }
.left {
    width: 50%;
    height: 100%;
    background-image: url("../../assets/imgs/bg2.png");
    background-repeat: no-repeat;
    background-size: 50%;
     float: left;
    position: absolute;
    opacity: 0.7;
    background-position: 60% 65%;
  }
.captcha-svg{
  background: #fff;
  display: inline-block;
  height: 44px;
  width: 130px;
  text-align: center;
  cursor: pointer;
}

.el-form {
  width: 600px;
}
 .bg_video {
      display: block;
      margin: auto;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.5;
    }
  
.el-form {
  position: absolute;
  right: 100px;
  top: 100px;
  background: rgba(0, 0, 255, 0.3);
  height: 500px;
}
.el-form-item {
  margin-top: 60px;
}
.el-input__inner {
  background: red !important;
}
.el-button {
  width: 250px;
  background: linear-gradient(90deg, rgb(47, 0, 255), rgb(0, 255, 234));
}
.top-one{
  text-align: center;
  display: block;
  color: #fff;
  font-size:36px ;
}
</style>
